{{define "content"}}

<!-- Package Header -->
<div class="row mb-4">
    <div class="col">
        <div class="card shadow-sm border-0 bg-gradient-primary text-white">
            <div class="card-body py-4">
                <div class="row align-items-center">
                    <div class="col-md-8">
                        <div class="d-flex align-items-center mb-3">
                            <i class="bi bi-globe2 me-3 fs-1"></i>
                            <div>
                                <h1 class="mb-1 fw-bold">{{.Package.DisplayName}}</h1>
                                <p class="mb-0 opacity-75 fs-5">{{.Package.Description}}</p>
                            </div>
                        </div>
                        <div class="d-flex flex-wrap gap-2 mb-3">
                            {{range .Package.Tags}}
                            <span class="badge bg-light text-primary border border-light">{{.}}</span>
                            {{end}}
                        </div>
                        <div class="d-flex gap-4">
                            <div class="d-flex align-items-center">
                                <i class="bi bi-star-fill text-warning me-2"></i>
                                <span class="fw-semibold">{{.Package.Stars}} stars</span>
                            </div>
                            <div class="d-flex align-items-center">
                                <i class="bi bi-tag me-2"></i>
                                <span>{{.Package.Version}}</span>
                            </div>
                            <div class="d-flex align-items-center">
                                <i class="bi bi-clock me-2"></i>
                                <span>{{.Package.EstimatedTime}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 text-md-end mt-3 mt-md-0">
                        <div class="mb-3">
                            <div class="d-flex justify-content-md-end align-items-center mb-2">
                                <span class="me-2">Progress</span>
                                <span class="badge bg-light text-primary">{{.UserProgress.CompletedCount}}/{{.TotalChallenges}}</span>
                            </div>
                            <div class="progress mb-3" style="height: 8px;">
                                <div class="progress-bar bg-warning" role="progressbar" 
                                     style="width: {{.UserProgress.ProgressPercentage}}%"></div>
                            </div>
                        </div>
                        <div class="d-flex justify-content-md-end gap-2">
                            <a href="{{.Package.GitHubURL}}" class="btn btn-light" target="_blank">
                                <i class="bi bi-github me-1"></i>GitHub
                            </a>
                            <a href="{{.Package.DocumentationURL}}" class="btn btn-outline-light" target="_blank">
                                <i class="bi bi-book me-1"></i>Docs
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Prerequisites & Real-world Usage -->
<div class="row mb-4">
    <div class="col-md-6">
        <div class="prerequisites-container h-100">
            <div class="section-header prerequisites">
                <div class="icon">
                    <i class="bi bi-list-check"></i>
                </div>
                <h5>Prerequisites</h5>
            </div>
            
            {{if .Package.Prerequisites}}
            <div class="row row-cols-1 g-2">
                {{range .Package.Prerequisites}}
                <div class="col">
                    <div class="d-flex align-items-center prerequisite-item">
                        <div class="icon">
                            <i class="bi bi-check-circle-fill"></i>
                        </div>
                        <span class="text">{{. | replace "_" " "}}</span>
                    </div>
                </div>
                {{end}}
            </div>
            {{else}}
            <div class="empty-state">
                <div class="icon">
                    <i class="bi bi-info-circle"></i>
                </div>
                <h6>No specific prerequisites required</h6>
                <p>Just basic Go knowledge to get started</p>
            </div>
            {{end}}
        </div>
    </div>
    
    <div class="col-md-6">
        <div class="usage-container h-100">
            <div class="section-header usage">
                <div class="icon">
                    <i class="bi bi-briefcase"></i>
                </div>
                <h5>Real-World Usage</h5>
            </div>
            
            {{if .Package.RealWorldUsage}}
            <div class="row row-cols-1 g-2">
                {{range .Package.RealWorldUsage}}
                <div class="col">
                    <div class="d-flex align-items-center usage-item">
                        <div class="icon {{if eq . "REST API development"}}rest-api{{else if eq . "Microservices"}}microservices{{else if eq . "Web applications"}}web-apps{{else if eq . "Database modeling"}}database{{else if eq . "E-commerce platforms"}}ecommerce{{else if eq . "User management systems"}}user-management{{else if eq . "DevOps tools"}}devops{{else if eq . "Command-line utilities"}}cli{{else if eq . "System administration"}}system-admin{{else if eq . "High-traffic APIs"}}high-traffic{{else if eq . "Real-time applications"}}real-time{{else if eq . "Microservices architecture"}}microservices-arch{{end}}">
                            {{if eq . "REST API development"}}
                            <i class="bi bi-cloud-arrow-up-fill"></i>
                            {{else if eq . "Microservices"}}
                            <i class="bi bi-diagram-3-fill"></i>
                            {{else if eq . "Web applications"}}
                            <i class="bi bi-browser-chrome"></i>
                            {{else if eq . "Database modeling"}}
                            <i class="bi bi-database-fill"></i>
                            {{else if eq . "E-commerce platforms"}}
                            <i class="bi bi-cart-fill"></i>
                            {{else if eq . "User management systems"}}
                            <i class="bi bi-people-fill"></i>
                            {{else if eq . "DevOps tools"}}
                            <i class="bi bi-tools"></i>
                            {{else if eq . "Command-line utilities"}}
                            <i class="bi bi-terminal-fill"></i>
                            {{else if eq . "System administration"}}
                            <i class="bi bi-gear-wide-connected"></i>
                            {{else if eq . "High-traffic APIs"}}
                            <i class="bi bi-speedometer2"></i>
                            {{else if eq . "Real-time applications"}}
                            <i class="bi bi-lightning-charge-fill"></i>
                            {{else if eq . "Microservices architecture"}}
                            <i class="bi bi-hexagon-fill"></i>
                            {{else}}
                            <i class="bi bi-gear-fill"></i>
                            {{end}}
                        </div>
                        <span class="text">{{.}}</span>
                    </div>
                </div>
                {{end}}
            </div>
            {{else}}
            <div class="empty-state">
                <div class="icon">
                    <i class="bi bi-briefcase"></i>
                </div>
                <h6>No usage examples available</h6>
                <p>Check back later for real-world examples</p>
            </div>
            {{end}}
        </div>
    </div>
</div>

<!-- Learning Path -->
<div class="row mb-4">
    <div class="col">
        <div class="text-center mb-4">
            <h2 class="fw-bold text-dark mb-2">🚀 Learning Path</h2>
            <p class="text-muted fs-5">Complete challenges in order to master {{.Package.DisplayName}}</p>
        </div>
        
        {{if .Challenges}}
        <div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-4">
            {{range $index, $challenge := .Challenges}}
            <div class="col">
                <div class="card h-100 shadow-sm hover-shadow challenge-card {{if index $.PackageAttempts $challenge.ID}}attempted-challenge{{end}}">
                    <div class="card-header py-3">
                        <div class="d-flex justify-content-between align-items-center">
                            <span class="badge {{if eq $challenge.Difficulty "Beginner"}}bg-success{{else if eq $challenge.Difficulty "Intermediate"}}bg-warning{{else}}bg-danger{{end}} rounded-pill">{{$challenge.Difficulty}}</span>
                            <span class="badge bg-secondary rounded-pill">Step {{add $index 1}}</span>
                        </div>
                    </div>
                    <div class="card-body">
                        <h5 class="card-title">{{$challenge.Title}}</h5>
                        
                        <!-- Challenge Features -->
                        <div class="d-flex flex-wrap gap-2 mb-3">
                            <span class="badge bg-light text-dark border">
                                <i class="bi bi-book me-1"></i>Learning Materials
                            </span>
                            <span class="badge bg-light text-dark border">
                                <i class="bi bi-code-slash me-1"></i>Test Cases
                            </span>
                            {{if $challenge.EstimatedTime}}
                            <span class="badge bg-info bg-opacity-10 text-info border border-info">
                                <i class="bi bi-clock me-1"></i>{{$challenge.EstimatedTime}}
                            </span>
                            {{end}}
                        </div>
                        
                        <!-- Progress Indicator -->
                        <div class="mb-3">
                            {{if index $.PackageAttempts $challenge.ID}}
                            <div class="d-flex align-items-center text-success">
                                <i class="bi bi-check-circle-fill me-2"></i>
                                <span class="small fw-semibold">Completed</span>
                            </div>
                            {{else}}
                            <div class="d-flex align-items-center text-muted">
                                <i class="bi bi-circle me-2"></i>
                                <span class="small">Not Started</span>
                            </div>
                            {{end}}
                        </div>
                        
                        <!-- Submission Count -->
                        <div class="text-muted small">
                            <i class="bi bi-people me-1"></i>{{index $.SubmissionCounts $challenge.ID}} submissions
                        </div>
                    </div>
                    <div class="card-footer bg-transparent">
                        <div class="d-flex justify-content-center">
                            <a href="/packages/{{$.Package.Name}}/{{$challenge.ID}}" class="btn btn-primary">
                                {{if index $.PackageAttempts $challenge.ID}}
                                <i class="bi bi-arrow-repeat me-1"></i>Retry
                                {{else}}
                                <i class="bi bi-play-circle me-1"></i>Start Challenge
                                {{end}}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            {{end}}
        </div>
        {{else}}
        <div class="text-center py-5">
            <div class="mb-4">
                <i class="bi bi-exclamation-circle text-muted" style="font-size: 4rem;"></i>
            </div>
            <h4 class="text-muted mb-3">No Challenges Available</h4>
            <p class="text-muted fs-5">Challenges for this package are being prepared. Check back soon!</p>
        </div>
        {{end}}
    </div>
</div>

<!-- Leaderboard Preview -->
<div class="row">
    <div class="col">
        <div class="card shadow-sm">
            <div class="card-header bg-white border-0">
                <div class="d-flex justify-content-between align-items-center">
                    <h4 class="mb-0">🏆 Top Contributors</h4>
                    <a href="/packages/{{.Package.Name}}/scoreboard" class="btn btn-outline-primary btn-sm">
                        View Full Leaderboard
                    </a>
                </div>
            </div>
            <div class="card-body">
                {{if .Leaderboard}}
                <div class="table-responsive">
                    <table class="table table-hover align-middle">
                        <thead class="table-light">
                            <tr>
                                <th>Rank</th>
                                <th>Contributor</th>
                                <th>Completed</th>
                                <th>Score</th>
                            </tr>
                        </thead>
                        <tbody>
                            {{range $index, $entry := .Leaderboard}}
                            {{if lt $index 5}}
                            <tr>
                                <td>
                                    {{if eq $index 0}}
                                    <span class="badge bg-warning text-dark">🥇 1st</span>
                                    {{else if eq $index 1}}
                                    <span class="badge bg-secondary">🥈 2nd</span>
                                    {{else if eq $index 2}}
                                    <span class="badge bg-warning">🥉 3rd</span>
                                    {{else}}
                                    <span class="badge bg-light text-dark">{{add $index 1}}</span>
                                    {{end}}
                                </td>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <img src="https://github.com/{{$entry.Username}}.png?size=32" 
                                             alt="{{$entry.Username}}" 
                                             class="rounded-circle me-2" 
                                             width="32" height="32">
                                        <strong>{{$entry.Username}}</strong>
                                    </div>
                                </td>
                                <td>{{$entry.TestsPassed}}/{{$entry.TestsTotal}}</td>
                                <td>
                                    <span class="badge bg-primary">{{calculatePercentage $entry.TestsPassed $entry.TestsTotal}}%</span>
                                </td>
                            </tr>
                            {{end}}
                            {{end}}
                        </tbody>
                    </table>
                </div>
                {{else}}
                <div class="text-center py-4">
                    <i class="bi bi-trophy text-muted fs-1 mb-3"></i>
                    <h5 class="text-muted">No submissions yet</h5>
                    <p class="text-muted">Be the first to complete a challenge!</p>
                </div>
                {{end}}
            </div>
        </div>
    </div>
</div>
{{end}}

{{define "scripts"}}
<script>
    // Add any package-specific JavaScript here
</script>

<style>
    .bg-gradient-primary {
        background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    }
    
    .card {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    
    .card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.1) !important;
    }
    
    .badge.bg-opacity-10 {
        font-weight: 500;
    }
</style>
{{end}} 